<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仓库管理</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="../../static/js/jquery-3.3.1.min.js"></script>
    <script src="../../static/js/utils.js"></script>
    <!-- 引入vue -->
    <script src="../../static/js/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .block {
            margin-top: 20px;
            display: flex;
            justify-content: flex-end;
        }

        /*.el-table ::-webkit-scrollbar {
            width: 0.5px;
            height: 8px;
        }

        .el-table ::-webkit-scrollbar-thumb {
            !*滚动条里面小方块*!
            border-radius: 6px;
            background-color: #b1b1b1;
        }

        .el-table ::-webkit-scrollbar-track {
            !*滚动条里面轨道*!
            background: #ffffff;
            border-radius: 6px;
        }*/
    </style>
</head>
<body>

<div id="app">
    <div style="margin-left: 20px">
        <el-form ref="searchForm" :model="outstoreSelectData" label-width="80px">
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item label="出库人">
                        <el-select v-model="outstoreSelectData.outstoreperson" filterable clearable
                                   style="width: 200px;"
                                   placeholder="请选择">
                            <el-option
                                    v-for="item in emp"
                                    :key="item.id"
                                    :label="item.employeename"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="出库时间">
                        <el-date-picker
                                v-model="outstoreSelectData.outstoretime"
                                type="date"
                                style="width: 200px;"
                                placeholder="选择日期"
                                format="yyyy 年 MM 月 dd 日"
                                value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="出库单号">
                        <el-input v-model="outstoreSelectData.outstorenumber" style="width: 200px;"
                                  placeholder="出库单号"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-button type="primary" @click="search" icon="el-icon-search">搜索</el-button>

                    <el-button type="primary" @click="addAndDialog" icon="el-icon-plus">添加</el-button>
                </el-col>
            </el-row>
        </el-form>
    </div>
    <el-table
            :data="outstoretables"
            height="490px"
            border
            :span-method="objectSpanMethod"
            style="width: 100%">
        <el-table-column
                type="index"
                width="50" align="center">
        </el-table-column>
        <el-table-column
                prop="employeename"
                label="出库人"
                width="180" align="center">
        </el-table-column>
        <el-table-column
                prop="partname"
                label="零件名"
                width="180" align="center">
        </el-table-column>
        <el-table-column
                prop="partunit"
                label="零件单位" align="center">
        </el-table-column>
        <el-table-column
                prop="outstorenumber"
                label="出库数量" align="center">
        </el-table-column>
        <el-table-column
                prop="producername"
                label="供应商" align="center">
        </el-table-column>
        <el-table-column
                prop="costprice"
                label="成本" align="center">
        </el-table-column>
        <el-table-column
                prop="zje"
                label="总金额" align="center">
        </el-table-column>
        <el-table-column
                prop="outstoretime"
                label="出库日期" align="center">
        </el-table-column>
        <el-table-column
                prop="storenumber"
                label="出库单号" align="center">
        </el-table-column>
        <el-table-column
                prop="ordercountmin"
                label="最小出库数量" align="center" width="120">
        </el-table-column>
    </el-table>
    <div class="block">
        <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currPage"
                :page-sizes="[10, 15, 20, 100]"
                :page-size="pageSize"
                layout="sizes, total, prev, pager, next"
                :total="total">
        </el-pagination>
    </div>
    <el-dialog title="添加出货" :visible.sync="dialogFormVisible">
        订单：
        <el-select v-model="orderTableId" placeholder="请选择订单" @change="myOrderstableAndUserInit">
            <el-option
                    v-for="item in orderstables"
                    :key="item.id"
                    :label="item.orderid"
                    :value="item.id">
            </el-option>
        </el-select>
        <div v-if="orderstableAndUserVisible" style="margin-top: 20px">
            <el-descriptions class="margin-top" title="订单" :column="3" border>
                <el-descriptions-item>
                    <template slot="label">
                        订单编号
                    </template>
                    {{orderstableAndUser.orderid}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        客户名
                    </template>
                    {{orderstableAndUser.clientName}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        创建人
                    </template>
                    {{orderstableAndUser.employeeName}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        订货日期
                    </template>
                    {{orderstableAndUser.createtime}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        备注
                    </template>
                    {{orderstableAndUser.remark | ellipsis}}
                </el-descriptions-item>
            </el-descriptions>
        </div>
        <div v-if="orderstableAndUserVisible" style="margin-top: 20px">
            <el-table
                    :data="orderstableAndUser.child"
                    style="width: 100%" height="200px">
                <el-table-column
                        label="订单编号"
                        width="180" align="center">
                    {{orderstableAndUser.orderid}}
                </el-table-column>
                <el-table-column
                        prop="partName"
                        label="零件名"
                        width="180" align="center">
                </el-table-column>
                <el-table-column
                        prop="ordercount"
                        label="订货数量" align="center">
                </el-table-column>
                <el-table-column
                        prop="price"
                        label="销售价" align="center">
                </el-table-column>
                <el-table-column
                        prop="agio"
                        label="销售折扣" align="center">
                </el-table-column>
                <el-table-column
                        prop="totalprice"
                        label="总价" align="center">
                </el-table-column>
            </el-table>
        </div>
        <div style="margin-top: 20px">
            备注：
            <el-input v-model="remark" type="textarea"
                      autosize
                      maxlength="150"
                      show-word-limit
                      placeholder="备注" style="width: 200px;"></el-input>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancel()">取 消</el-button>
            <el-button type="primary" @click="commit" :disabled="disabled">确 定</el-button>
        </div>
    </el-dialog>
</div>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            currPage: 1,//当前页
            pageSize: 10,//每页显示条数
            total: 0,//总条数
            disabled: true,
            outstoretables: [],
            emp: [],
            spanArr: [], // 需要合并的行数
            pos: 0,// 索引

            spanArr2: [], // 需要合并的行数
            pos2: 0,// 索引
            outstoreSelectData: {
                outstorenumber: '',
                outstoretime: '',
                outstoreperson: ''
            },
            dialogFormVisible: false,
            orderstableAndUser: [],
            orderstables: [], // 下拉用
            orderTableId: "",
            orderstableAndUserVisible: false,
            remark: '',
            outadd: {
                id: '',
                nameId: '',
                name: '',
                remark: ''
            }
        },
        methods: {
            cancel() {
                this.dialogFormVisible = false;
                this.orderstableAndUserVisible = false;
                this.disabled = true;
                this.orderstables = [];
                this.orderstableAndUser = [];
                this.orderTableId = '';
                this.outadd.id = '';
                this.outadd.nameId = '';
                this.outadd.name = '';
                this.outadd.remark = '';
                this.remark = '';
            },
            commit() {
                this.outadd.id = this.orderTableId;
                this.outadd.remark = this.remark;
                this.outadd.nameId = localStorage.getItem("id");
                this.outadd.name = localStorage.getItem("username");
                let _this = this;
                addOrUpdateAjax("post", "/outstoretable/add", this.outadd, (data) => {
                    if (data.code == 200) {
                        _this.dialogFormVisible = false;
                        _this.orderstableAndUserVisible = false;
                        _this.orderstables = [];
                        _this.orderstableAndUser = [];
                        _this.orderTableId = '';
                        _this.outadd.id = '';
                        _this.outadd.nameId = '';
                        _this.outadd.name = '';
                        _this.outadd.remark = '';
                        _this.remark = '';
                        _this.disabled = true;
                        _this.$message({
                            message: data.msg,
                            type: 'success'
                        });
                        _this.myOutsroe();
                    } else {
                        _this.$message.error(data.msg);
                    }
                })
            },
            addAndDialog() {
                this.dialogFormVisible = true;
                this.myOrderstablesInit();
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.myOutsroe();
            },
            handleCurrentChange(val) {
                this.currPage = val;
                this.myOutsroe();
            },
            search() {
                this.myOutsroe();
            },
            getSpanArr(data) {
                // 遍历数据
                for (let i = 0; i < data.length; i++) {
                    // 如果是第一个数据，就将列表spanArr添加一个1，表示暂时只有一个名字相同的、且将索引pos赋值为0
                    if (i === 0) {
                        this.spanArr.push(1);
                        this.pos = 0

                        this.spanArr2.push(1);
                        this.pos2 = 0
                    } else {
                        // 判断当前元素与上一个元素是否相同
                        if (data[i].ordercountmin === data[i - 1].ordercountmin) {
                            // 如果相同就将索引为 pos 的值加一
                            this.spanArr[this.pos] += 1;
                            // 且将数组添加 0
                            this.spanArr.push(0);
                        } else {
                            // 如果元素不同了，就可以通过索引为 pos 的值知晓应该需要合并的行数
                            // 同时，我们再次添加一个值1，表示重新开始判断重复姓名的次数
                            this.spanArr.push(1);
                            // 同时 索引加一
                            this.pos = i;
                        }

                        if (data[i].storenumber === data[i - 1].storenumber) {
                            // 如果相同就将索引为 pos 的值加一
                            this.spanArr2[this.pos2] += 1;
                            // 且将数组添加 0
                            this.spanArr2.push(0);
                        } else {
                            // 如果元素不同了，就可以通过索引为 pos 的值知晓应该需要合并的行数
                            // 同时，我们再次添加一个值1，表示重新开始判断重复姓名的次数
                            this.spanArr2.push(1);
                            // 同时 索引加一
                            this.pos2 = i;
                        }
                    }
                }
            },
            objectSpanMethod({row, column, rowIndex, columnIndex}) {
                if (columnIndex === 10) {
                    /*

                    将需要合并的行数赋值给 _row，注意这里由上一个方法的输出可以知道，这里的值可以是 3或者0

                    当为 3 时，表示将当下的第 rowIndex+1 行与第 columnIndex+1 列所指向的单元格向下合并 _row 格

                    当为 0 时，表示将当下的第 rowIndex+1 行与第 columnIndex+1 列所指向的单元格隐藏

                    */
                    const _row = this.spanArr[rowIndex];
                    const _col = _row > 0 ? 1 : 0;
                    return {

                        rowspan: _row,
                        colspan: _col
                    }
                }
                if (columnIndex === 9) {
                    const _row = this.spanArr2[rowIndex];
                    const _col = _row > 0 ? 1 : 0;
                    return {

                        rowspan: _row,
                        colspan: _col
                    }
                }
            },
            myOutsroe() {
                let _this = this;
                if (localStorage.getItem("token") != null) {
                    $.ajax({
                        url: 'http://localhost:8080/carSales/outstoretable/list?currPage=' + _this.currPage + '&pageSize=' + _this.pageSize,
                        async: true,
                        // contentType: 'application/json;charset=utf-8',
                        data: _this.outstoreSelectData,
                        beforeSend: function (request) {
                            request.setRequestHeader("Authentication", localStorage.getItem("token"));
                        },
                        dataType: 'json',
                        success: function (data) {
                            _this.currPage = data.pageNum;
                            _this.pageSize = data.pageSize;
                            _this.total = data.total;
                            _this.outstoretables = data.data
                            _this.getSpanArr(data.data);
                        }
                    })
                }else {
                    alert("未登录！！！")
                    top.location.href = "../login/login.html";
                }
            },
            myEmpInitSelect() {
                let _this = this;
                selectAjax("get", "/employeetable/list", null, (data) => {
                    _this.emp = data.data;
                })
            },
            myOrderstablesInit() {
                selectAjax("get", "/orderstable/selectAll", null, (data) => {
                    this.orderstables = data.data;
                })
            },
            myOrderstableAndUserInit() {
                let _this = this;
                selectAjax("get", "/orderstable/selectAllAndUser/" + this.orderTableId, null, (data) => {
                    if (data.data.child.length > 0) {
                        _this.disabled = false;
                    }
                    _this.orderstableAndUser = data.data;
                    _this.orderstableAndUserVisible = true;
                })

            }
        },
        mounted() {
            this.myOutsroe();
            this.myEmpInitSelect();
        },
        filters: {
            //文字数超出时，超出部分使用...
            ellipsis(value) {
                if (!value) return ''
                if (value.length > 10) {
                    return value.slice(0, 10) + '...'
                }
                return value
            }
        }
    })
</script>
</body>
</html>